<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">网络设置</block>
		</cu-custom>

		<view class="login-bg">
			
			<view class="login-card">
				<scroll-view scroll-x class="bg-white nav text-center login-head">
					<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in title.length" :key="index"
					 @tap="tabSelect" :data-id="index">
						{{title[index]}}
					</view>
				</scroll-view>
				<!-- 无线设置View strat-->
				<view v-if="TabCur==0">
					<view class="login-input login-margin-b">
						<input type="text" v-model="ssid" placeholder="无线名称" />
					</view>
					<view class="login-input">
						<input type="text" :password="passType" v-model="password" placeholder="无线密码" />
						<image @tap.stop="hidePass" class="passHide" :src="passType?'../../static/hide.png':'../../static/display.png'"></image>
					</view>

					<view class="login-btn">
						<button class="landing" @click="btnWireless" type="primary">生成二维码</button>
					</view>
				</view>
				<!-- 无线设置View end-->

				<!-- 有线设置View -->
				<view v-else>
					<radio-group class="login-margin-b" @change="RadioChange">
						<label class="group-item">
							<radio :checked="radio=='A'?true:false" value="A" /><text class="padding">自动获取ip地址</text>
						</label>
						<label class="group-item">
							<radio :checked="radio=='B'?true:false" value="B" /><text class="padding">使用下面的ip地址</text>
						</label>
					</radio-group>

					<view class="login-input login-margin-b login-margin-t">
						<input type="text" :disabled="inputDisable" v-model="ipAddress" placeholder="ip地址" />
					</view>
					<view class="login-input login-margin-b">
						<input type="text" :disabled="inputDisable" v-model="mask" placeholder="子网掩码" />
					</view>
					<view class="login-input">
						<input type="text" :disabled="inputDisable" v-model="gateway" placeholder="默认网关" />
					</view>

					<view class="login-btn">
						<button class="landing" @click="btnWired" type="primary">生成二维码</button>
					</view>
				</view>
				<!-- 有线设置View -->
			</view>
			<view class="text-wrapper padding">1.相机目前暂时不支持5G网络和混合网络；<br>2.若使用有线网络请
				<text @tap="nextStep" class="text-link">跳过此步</text>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='ImageModel'?'show':''">
			<view class="cu-dialog">
				<!-- 				<view class="bg-img" :style="'background-image: url('+qrcodeUrl+');height:360px;padding:30upx'">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view> -->
				<view class="bg-img">
					<view class="view-text">
						<text>请将二维码对准相机镜头10 — 30cm处</text>
					</view>
					<image :src="$constant.IMG_VERSION == $constant.OSS?qrcodeUrl:$constant.BASEURL+qrcodeUrl" mode="widthFix" class="dialog-image"></image>
				</view>

				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: ['无线设置', '有线设置'],
				TabCur: 0,
				scrollLeft: 0,
				radio: 'A',
				inputDisable: true,
				ssid: '',
				password: '',
				ipAddress: '192.168.0.88',
				mask: '225.225.225.0',
				gateway: '192.168.0.1',
				deviceId: '',
				modalName: null,
				qrcodeUrl: '',
				link:'',
				passType:true
			}
		},
		onLoad(option) {
			this.deviceId = option.deviceId.substr(option.deviceId.length-4,option.deviceId.length)
			console.log(this.deviceId )
			this.link = option.link
		},
		methods: {
			nextStep(){
				if(this.link=='first'){
					uni.switchTab({
					    url: '../attendance/attendance'
					});
				}else{
					uni.navigateBack({
						delta:1
					})
				}
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			RadioChange(e) {
				this.radio = e.detail.value
				this.inputDisable = this.radio == 'A'
			},
			btnWired() {
				//有线
				if (!this.checkIpAddress(this.ipAddress)) {
					uni.showToast({
						title: '请输入正确的ip地址',
						icon: 'none'
					})
					return
				}
				if (!this.checkIpAddress(this.mask)) {
					uni.showToast({
						title: '请输入正确的子网掩码',
						icon: 'none'
					})
					return
				}
				if (!this.checkIpAddress(this.gateway)) {
					uni.showToast({
						title: '请输入正确的网关',
						icon: 'none'
					})
					return
				}
				var str = this.deviceId
				if (this.radio == 'A') {
					str += 'dhcp1'
				} else {
					str += `ip${this.ipAddress}gw${this.gateway}mk${this.mask}`
				}
				this.GenerateQRcode(str)
			},
			btnWireless() {
				//无线
				if (this.ssid == '') {
					uni.showToast({
						title: '请填写无线名称',
						icon: 'none'
					})
					return
				}

				if (this.password != '' && this.password.length < 8) {
					uni.showToast({
						title: '无线密码需要大于8位',
						icon: 'none'
					})
					return
				}
				// 处理中文字符串
				let ssid = this.ssid.replace(/[\u0391-\uFFE5]/g,"aaa");
				let slen = ssid.length
				if(slen<10){
					slen = '0'+slen
				}
				var str = `${this.deviceId}ssid${slen}${this.ssid}pd${this.password}`
				this.GenerateQRcode(str)
			},
			checkIpAddress(ip) {
				return /((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/.test(ip)
			},
			//生成二维码
			GenerateQRcode(str) {
				console.log(str)
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_QRCODE,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						config: str
					},
					success: (res) => {
						var result = res.data
						console.log(result)
						if (result.code == 0) {
							this.qrcodeUrl = result.data
							this.modalName = 'ImageModel'
						}
					}
				});
			},
			hidePass(){
				this.passType = !this.passType
			},
			hideModal() {
				this.modalName = ''
				if(this.link=='first'){
					uni.switchTab({
					    url: '../attendance/attendance'
					});
				}else{
					uni.navigateBack({
						delta:1
					})
				}
			}
		}
	}
</script>

<style>
	.passHide {
		position: absolute;
		right: 60rpx;
		bottom: 218rpx;
		z-index: 2;
		display: block;
		width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		pointer-events: auto;
		cursor: pointer;
	}
	.view-text {
		color: #39B54A;
		height: 70upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.margin-top {
		margin-top: 20upx;
	}

	.dialog-image {
		/* height: 360upx; */
	}

	.group-item {
		height: 70upx;
		padding: 0upx 20upx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.landing {
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left, #5599ff, #5599ff);
	}

	.login-btn {
		padding: 10upx 20upx;
		margin-top: 30upx;
	}

	.login-function {
		overflow: auto;
		padding: 20upx 20upx 30upx 20upx;
	}

	.login-forget {
		float: left;
		font-size: 26upx;
		color: #999;
	}

	.login-register {
		color: #666;
		float: right;
		font-size: 26upx;

	}

	.login-input input {
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}

	.login-margin-t {
		margin-bottom: 15upx;
	}

	.login-margin-b {
		margin-bottom: 15upx;
	}

	.login-input {
		padding: 10upx 20upx;
	}

	.login-head {
		font-size: 34upx;
		text-align: center;
		padding: 25upx 10upx 55upx 10upx;
	}

	.login-card {
		background: #fff;
		border-radius: 12upx;
		padding: 10upx 25upx 60upx;
		box-shadow: 0 6upx 18upx rgba(0, 0, 0, 0.12);
		position: relative;
		margin-top: 120upx;
	}

	.login-bg {
		height: 260upx;
		padding: 25upx;
		background: linear-gradient(#5599ff, #5599ff);
	}
	.text-link{
		font-size: 32upx;
		color: #007AFF;
		text-decoration: underline;
	}
	.text-wrapper{
		white-space: pre-wrap;
	}
</style>
